// 发送群消息弹窗
<template>
    <div>
        <div class="groupChatBox" v-if='isModel'>
            <div class="mainWin">
                <div class="mainWinHead flex flex-align-center">
                    <p class="flex-1">群发消息</p>
                    <img src="@/assets/img/business/business-close.png" alt="" @click="closeModelFun">
                </div>
                <div class="mainWinCont">
                    <div class="user-list-Box">
                        <div class="searchbox">
                        <div class="inputBox flex">
                                <input type="text" placeholder="输入会员名称" v-model.trim='searchText'>
                                <div class="sousBtn  flex flex-align-center flex-pack-center" @click="onSearchFun"><p>搜索</p></div>
                            </div>
                        </div>
                       <div class="flex">
                           <!-- 左边用户列表 -->
                            <div class="user-list-left flex-1">
                                <div v-for='(item,index) in userList' :key='index' >
                                <div class="chat-userlist-f flex flex-align-center" @click="onUserListFun(index)">
                                    <img :src="(index == isOnFimg)?userListFImgOn:userListFImg" :class="{'onimg':(index == isOnFimg)}">
                                    <p class="flex-1" v-if='item.group_type == 0' >普通会员<span>{{item.on_line}}/{{item.total_num}}</span></p>
                                    <p class="flex-1" v-if='item.group_type == 1' >主管账户<span>{{item.on_line}}/{{item.total_num}}</span></p>
                                    <p class="flex-1" v-if='item.group_type == 2' >招商账户<span>{{item.on_line}}/{{item.total_num}}</span></p>
                                    <p class="flex-1" v-if='item.group_type == 3' >直属账户<span>{{item.on_line}}/{{item.total_num}}</span></p>
                                </div>
                                <div  v-show="index == isOnFimg" class="chan-list">
                                <!-- 用户列表子级菜单 -->
                                <div class="chat-userlist-chan flex flex-align-center" v-for='(e, i) in item.data' :key='i' @click="onChanActive(e.nickname,e.id)">
                                    <p class="flex-1" :class="{'nikename_login':e.login_status == 0}" >{{e.nickname}}</p>
                                </div>
                                </div>
                                </div><!-- 左边用户列表结束 -->
                            </div>
                            <!-- 右边群成员列表 -->
                            <div class="user-list-right flex-1">
                                <div class="chat-userlist-groupItem flex flex-align-center">
                                    <p class="group-list-title">已选择联系人: {{groupNum}}</p>
                                </div>
                                <div class="chat-userlist-groupItem flex flex-align-center" v-for='(item,index) in group' :key='index' :class="{'item-active':isgroupDel == item.id}" @mouseenter='onShowDel(item.id)' @mouseleave='onUnshowDel'>
                                    <p class="group-list-item flex-1">{{item.nickname}}</p>
                                    <div  v-if='isgroupDel == item.id' class="deluser flex flex-align-center flex-pack-center" @click="onDelGroupUserFun(item.id)"><p>X</p></div>
                                </div>
                            </div>
                       </div>
                    </div>
                   <!-- 完成或取消按钮 -->
                   <div class="Btn-group flex">
                     <div class="completeBtn flex flex-align-center flex-pack-center" @click="onCompleteFun">
                         <p>完成</p>
                     </div>
                     <div class="cancelBtn flex flex-align-center flex-pack-center" @click="onCancelFun">
                         <p>取消</p>
                     </div>
                   </div>
                </div>
                 <!-- 搜索框 -->
                <div class='searchCont' v-if='isSearchCont'>
                   <div class="searchCont-item"  v-for='(item,index) in SearchUserList' :key='index' @click='onChanActive(item.nickname,item.id)'>{{item.nickname}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            userListFImgOn:'./static/img/chatroom/chat-room-arrbottom.png',
            userListFImg:'./static/img/chatroom/chatroom-arrright.png',
            isOnFimg:true, //判断用户列表父级菜单是否点击
            isgroupDel:false, 
            group:[], //群成员
            isSearchCont:false,
            searchText:'',//搜索内容
            SearchUserList:[],
        }
    },
    props: {
        isModel:{
            type: Boolean,
            default: false,
        },
        typeN:{
            type:String, // 1=管理群，根据群ID请求群成员
            default: '0', //默认为添加群
        }
    },
    watch: {
        typeN(news,old){
            if(news != 0){
                let group_id = this.$store.state.toUserInfo.group_id;
                let uid = this.$store.state.userInfo.id;
                this.https('chat/postObtainGroupChatMembers',{group_id:group_id,uid:uid})
                .then(data => {
                    let root = [];
                    for(var i in data){
                        data[i].id = data[i].uid;
                        if(data[i].id != uid){
                           root.push(data[i]); 
                        }
                    }
                    this.group = root;
                })
            }else{
                this.group=[];
            }
        },
        searchText(news,olds){
            if(news == ''){
                 this.isSearchCont = false;
            }
        }
    },
    computed: {
        userList(){ //获取用户列表
           return this.$store.getters.getUserList;
       },
       groupNum(){
           return this.group.length;
       }
    },
    methods: {
    closeModelFun(){ //关闭窗口
        this.$emit('close');
      },
    onUserListFun(index){ //用户列表 父级点击
            if(index == this.isOnFimg){
                this.isOnFimg = -1;
            }else{
                this.isOnFimg = index;
            }
    },
    onSearchFun(){ //搜索
        let uid = this.$store.state.userInfo.id;
        if(this.searchText != ''){
          this.https('chat/postSearchUsersByKeyword',{uid:uid,keyword:this.searchText})
            .then(data => {
                    this.isSearchCont = true;
                    this.SearchUserList = data;
             })
        }
    },
    onChanActive(nickname,id){ //左边子级菜单点击
        let isChonf = false;
        var list ={
            nickname:nickname,
            id:id
        }
        for(var i in this.group){
            if(this.group[i].id == id){
                isChonf = true;
            }
        }
        if(!isChonf){
            this.group.push(list);
        }
    },
    onDelGroupUserFun(id){ //删除群成员
        let arr = this.group;
        for(var i in arr){
            if(arr[i].id == id){
               var index =  this.group.indexOf(arr[i]);
               if (index > -1) {
                    this.group.splice(index, 1);
                }
            }
        }
    },
    onShowDel(id){ //鼠标移入事件
        this.isgroupDel = id;
    },
    onUnshowDel(){ //鼠标移出事件
        this.isgroupDel = false;
    },
    onCompleteFun(){ //确认
        var lottery_id = this.$store.state.lottery_id;
        var idStr=[];
        var uid = this.$store.state.userInfo.id;
        var to_group_id = this.$store.state.toUserInfo.group_id; //待修改群id
        for(var i in this.group){
            idStr.push(this.group[i].id);
        }
        if(idStr.length>0){
            if(this.typeN == 0){ //添加群
                 this.https('chat/postAddGroupChatInformation',{ids:idStr.toString(),lottery_id:lottery_id,uid:uid})
                .then(data => {
                    var list = {
                        create_time:'',
                        group_id:data.group_id,
                        id:'',
                        login_status:'',
                        name:data.group_name,
                        total_num:data.total_num,
                        group_uid:uid,
                        un_read_num:0,
                    }
                    var msgList = this.$store.getters.getMsgUserList;
                    msgList.push(list);
                    this.$store.commit('setMsgUserList',msgList);
                    this.group = [];
                    // 打开群聊天界面
                    let text = data.group_name+'('+data.total_num+'人)'
                    let userInfo = {name:text,id:data.id,group_id:data.group_id}
                    this.$store.commit('setToUserInfo',userInfo);
                    // 清空聊天界面
                    let root = [];
                    this.$store.commit('setAllMsgList',root);
                    this.$emit('close');
                });
            }else{ //修改群成员
                this.https('Chat/postUpdateGroupInfo',{uid:uid,group_id:to_group_id,ids:idStr.toString()})
                .then(data => {
                    this.group = [];
                    let msgUserList = this.$store.state.msgUserList;
                    for(var i in msgUserList){
                        if(msgUserList[i].group_id == data.group_id){
                            msgUserList[i].total_num = data.total_num;
                        }
                    }
                    this.$emit('close');
                })
            }
        }else{
            this.$toast({massge:'群成员人数为0，请添加群人员'});
        }
    },
    onCancelFun(){ //取消
        this.group = [];
        this.$emit('close');
    },
    }
}
</script>
<style lang="less" scoped>
@import url(../../../assets/css/chatroom/groupchat.less);
</style>


